<template>
  <el-dialog :title="'付款单选择'" :close-on-click-modal="false" :visible.sync="visible" fullscreen center append-to-body>
      <el-form :inline="true" ref="searchForm" :model="dataForm" @keyup.enter.native="searchChange()">
        <el-form-item label="付款单号" prop="code">
          <el-input v-model="dataForm.billId" placeholder="付款单号" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="制造商">
          <el-input v-model="dataForm.supplyName" readonly>
            <el-button slot="append" @click="checkSupplyList" disabled>选择</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="付款单日期">
          <el-row>
            <el-col :span="11">
              <el-date-picker v-model="dataForm.createTimeStart" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center;">-</el-col>
            <el-col :span="11">
              <el-date-picker v-model="dataForm.createTimeEnd" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="审核日期">
          <el-row>
            <el-col :span="11">
              <el-date-picker v-model="dataForm.auditTimeStart" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center;">-</el-col>
            <el-col :span="11">
              <el-date-picker v-model="dataForm.auditTimeEnd" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="searchChange">查询</el-button>
          <el-button type="default" icon="el-icon-delete" size="mini" @click="searchReset">清空</el-button>
        </el-form-item>
      </el-form>
      <el-row style="margin-bottom: 3px;">
        <el-button type="primary" size="mini" @click="choiceAndClose">选择并关闭</el-button>
      </el-row>
      <div class="avue-crud">
        <el-table :data="dataList" height="calc(100vh - 215px)" ref="singleTable" border v-loading="dataListLoading"  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column prop="billId" label="付款单号"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column prop="writeOffAmount" label="本次核销金额"></el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                :total="totalPage"
                background
                layout="total, sizes, prev, pager, next">
        </el-pagination>
      </div>
      <!-- 弹窗, 制造商查询 -->
      <supply-search v-if="supplySearchVisible" ref="supplySearch" @refreshData="renewFormData"></supply-search>
  </el-dialog>
</template>

<script>
  import {fetchList, delObj,cancelAuditById} from '@/api/eims/payslip'
  import SupplySearch from "@/components/business/SearchSupply"
  import { filterParams } from '@/util/tools'
  import {mapGetters} from 'vuex'
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          supplyName: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        supplySearchVisible: false,
      }
    },
    components: {
      SupplySearch
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    methods: {
      init(data){
        this.visible = true
        this.dataForm = data
        this.dataForm.status = '1'
        this.dataList = []
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        let params1 = {
          current: this.pageIndex,
          size: this.pageSize
        }
        let params2 = filterParams(this.dataForm)
        fetchList(Object.assign(params1, params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      searchChange() {
        this.pageIndex=1;
        this.getDataList()
      },
      // 搜索清空
      searchReset () {
        for (let key in this.dataForm) {
          if(key != 'supplyName' && key != 'supplyId'){
            this.dataForm[key] = ''
          }
        }
      },
      /**
       * 刷新回调
       */
      refreshChange() {
        this.getDataList(this.page)
      },
      typeFormatter(row, column, cellValue, index) {
        switch (cellValue) {
          case "1":
            return '采购付款'
            break
          case "2":
            return '预付款'
            break
          case "3":
            return '厂商减账'
            break
          case "4":
            return '调账'
            break
          case "5":
            return '其他付款'
            break
        }
      },
      payTypeFormatter(row, column, cellValue, index) {
        switch (cellValue) {
          case "1":
            return '按制造商'
            break
          case "2":
            return '按部门'
            break
        }
      },
      //选择制造商
      checkSupplyList() {
        let data = {};
        this.supplySearchVisible = true;
        this.$nextTick(() => {
          this.$refs.supplySearch.init(data);
        });
      },
      // 选择制造商
      renewFormData(data) {
        this.dataForm.supplyId = data.id;
        this.dataForm.supplyName = data.name;
      },
            //  多选表格改变事件
      handleSelectionChange(val) {
        this.selectionList = val
      },
      //  选择部门并关闭弹窗
      choiceAndClose() {
        this.visible = false
        this.$emit('refreshData',this.selectionList)
      }
    }
  }
</script>
